<template>
  <view class="page">
    <uni-nav-bar
      showMenuButtonWidth
      statusBar
      backgroundColor="transparent"
      :border="false"
      color="#333"
      fixed
      @clickLeft="$tools.back"
    >
      <view slot="left">
        <image
          src="/pages/marketing/static/giftcard/page_back.png"
          class="back-icon"
        />
      </view>
    </uni-nav-bar>
    <view class="header">
      <image
        src="/pages/marketing/static/giftcard/detail-bg.png"
        class="header-bg"
      />
      <!-- 顶部信息 -->
      <view class="header-content">
        <view class="header-content-left">
          <image
            src="/pages/marketing/static/giftcard/settletitle.png"
            class="header-content-left-title"
          />
          <view class="header-content-left-desc">左右滑动选择卡片图片</view>
        </view>
        <view class="header-content-right"> 常见问题 </view>
      </view>
      <!-- 选择卡片图片 -->
      <swiper
        class="card-swiper"
        previous-margin="50rpx"
        next-margin="50rpx"
        circular
        :current="currentCardFaceIndex"
        @change="handleChangeTemplate"
      >
        <swiper-item
          class="card-swiper-item"
          v-for="(item, index) in cardFaceList"
          :key="index"
        >
          <view
            class="card-swiper-item-content"
            :class="{ active: currentCardFaceIndex === index }"
          >
            <image
              :src="item.cardFaceImage"
              class="card-swiper-item-image"
            />
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 选择面额 -->
    <view class="container">
      <view class="container-header">
        <image
          src="/pages/marketing/static/giftcard/denomination.png"
          class="container-header-title"
          mode="heightFix"
        />
        <text>购买后可赠送好友</text>
      </view>
      <!-- 面额列表 -->
      <view class="container-list">
        <view
          class="container-item"
          v-for="item in purchaseInfo"
          :key="item.skuId"
        >
          <image
            src="/pages/marketing/static/giftcard/icon.png"
            class="container-item-icon"
          />
          <view class="container-item-content">
            <text class="text-base">
              {{ item.cardType != "2" ? "雪王礼品卡" : "自定义面额" }}
            </text>
            <text
              class="text-lg"
              v-if="item.cardType != '2'"
            >
              ￥{{ $tools.formatPrice(item.faceAmount) }}
            </text>
            <uni-easyinput
              v-else
              v-model="item.faceAmount"
              type="digit"
              maxlength="5"
              :inputBorder="false"
              :clearable="false"
              placeholder="仅限充值 5-200 元"
              placeholderStyle="color: #aaa; fontSize: 28rpx"
            >
              <template
                #left
                v-if="item.faceAmount > 0"
              >
                ￥
              </template>
            </uni-easyinput>
          </view>
          <view
            class="container-item-action"
            v-if="item.faceAmount > 0"
          >
            <image
              src="/pages/marketing/static/giftcard/minus.png"
              class="container-item-action-icon"
              @tap="minus(item)"
              v-if="item.quantity"
            />
            <text
              v-if="item.quantity"
              class="container-item-action-text"
            >
              {{ item.quantity }}
            </text>
            <image
              src="/pages/marketing/static/giftcard/plus.png"
              class="container-item-action-icon"
              @tap="add(item)"
            />
          </view>
        </view>
      </view>
    </view>
    <!-- 温馨提示 -->
    <view class="tips-container">
      <image
        src="/pages/marketing/static/giftcard/warm_tip.png"
        class="tips-container-title"
        mode="heightFix"
      />
      <view class="tips-container-content">
        <view>
          1.若您有与礼品卡相关的问题，如购买/使用/有效期/退款/转赠发票等，可点击"常见问题"进行查询；
        </view>
        <view> 2.本卡不记名、不挂失、不兑换，可多次使用，直至余额为零； </view>
        <view>
          3.安全提醒：（1）请勿轻信陌生人通过网络聊天、会议、直
          播、电话、短信、视频网站等途径，以诸如"免费送游戏皮肤/账
          户"、"完成任务/刷单/凑流水等即返优惠福利/现金奖励"、"账号
          冻结解冻"、"冒充公检法"人员桐吓"、"假冒亲友求助"等方
          式，欺骗、诱导您登录他人账户购买礼品卡转赠他人。（2）为
          了您的购卡资金安全，在进行相关操作前，请一定留意：①若您
          拟为本账户购卡，请确保本账户系您本人会员账户，并注意保
          管好您自己的账号密码，不要对陌生人分享验证码：②若您拟购
          卡转赠他人，为了保障您的权益，建议核实受赠人的身份信息；
          4.如您有任何疑问，可联系在线客服
        </view>
      </view>
    </view>
    <view class="space"></view>
    <view class="footer">
      <button
        class="footer-btn"
        :disabled="!totalQuantity"
      >
        共 {{ totalQuantity }} 张 ￥ {{ totalAmount }} 下一步
      </button>
    </view>
  </view>
</template>
<script>
import { mapState } from "vuex"
export default {
  name: "GiftCardDetail",
  data() {
    return {
      purchaseInfo: [
        {
          skuId: "1899768969250873346",
          faceAmount: 3000,
          cardType: "1"
        },
        {
          skuId: "1881157980171436033",
          faceAmount: 5000,
          cardType: "1"
        },
        {
          skuId: "1881157980171436035",
          faceAmount: 10000,
          cardType: "1"
        },
        {
          skuId: "1881157980171436036",
          faceAmount: 20000,
          cardType: "1"
        },
        {
          skuId: "1881157980175630338",
          faceAmount: "",
          cardType: "2"
        }
      ],
      currentCardFaceIndex: 0,
      customAmount: ""
    }
  },
  onLoad(options) {
    const templateId = options.templateId
    if (templateId) {
      this.currentCardFaceIndex = this.cardFaceList.findIndex(
        item => item.templateId === templateId
      )
    }
  },
  computed: {
    ...mapState("giftCard", ["cardFaceList"]),
    totalQuantity() {
      return this.purchaseInfo.reduce(
        (acc, item) => acc + (item.quantity || 0),
        0
      )
    },
    totalAmount() {
      const res = this.purchaseInfo.reduce(
        (acc, item) =>
          acc +
          (item.quantity || 0) *
            (item.cardType != "2" ? item.faceAmount / 100 : item.faceAmount),
        0
      )
      return parseFloat(res)
    }
  },
  methods: {
    handleChangeTemplate(e) {
      this.currentCardFaceIndex = e.detail.current
    },
    add(item) {
      if (item.quantity) {
        this.$set(item, "quantity", item.quantity + 1)
      } else {
        this.$set(item, "quantity", 1)
      }
    },
    minus(item) {
      this.$set(item, "quantity", item.quantity - 1)
    }
  }
}
</script>
<style lang="scss" scoped>
page {
  background-color: #fff8f8;
  padding-bottom: 150rpx;
}

.back-icon {
  width: 64rpx;
  height: 65rpx;
}

.header {
  width: 750rpx;
  height: 674rpx;
  position: relative;
  padding-top: 44px;

  &-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  &-content {
    padding: $uni-spacing-row-xl 0 $uni-spacing-row-xxl $uni-spacing-row-xl;
    display: flex;
    align-items: center;
    justify-content: space-between;

    &-left {
      flex: 1;
      display: flex;
      flex-direction: column;

      &-title {
        width: 232rpx;
        height: 40rpx;
        margin-bottom: $uni-spacing-row-sm;
      }

      &-desc {
        font-size: $uni-font-size-sm;
        color: $uni-text-color-grey;
      }
    }

    &-right {
      background: #fff7f7;
      width: 150rpx;
      height: 60rpx;
      border-radius: 30rpx 0 0 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: $uni-font-size-sm;
      color: $uni-text-color;
    }
  }
}

.card-swiper {
  width: 750rpx;
  height: 400rpx;

  &-item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    &-content {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      &:not(.active) {
        transform: scale(0.9);
      }
    }

    &-image {
      width: 100%;
      height: 100%;
      border-radius: $uni-border-radius-xxl;
    }
  }
}

.container {
  position: relative;
  padding: $uni-spacing-row-xl;
  margin: 0 $uni-spacing-row-xl;
  background-color: #fff;
  margin-top: -$uni-spacing-row-base;
  border-radius: $uni-border-radius-xxl;

  &-header {
    display: flex;
    align-items: center;
    margin-bottom: $uni-spacing-row-xl;
    color: $uni-text-color-grey;
    font-size: $uni-font-size-sm;

    &-title {
      height: 41rpx;
      margin-right: $uni-spacing-row-base;
    }
  }

  &-list {
    display: flex;
    flex-direction: column;
    gap: $uni-spacing-row-base;
  }

  &-item {
    display: flex;
    align-items: center;
    padding: $uni-spacing-row-xl;
    border-radius: $uni-border-radius-xxl;
    background: #fff;
    border: 1rpx solid $uni-border-color;
    color: $uni-text-color;

    &-icon {
      height: 88rpx;
      width: 88rpx;
      margin-right: $uni-spacing-row-base;
    }

    &-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: $uni-spacing-row-base;
    }

    &-action {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: $uni-spacing-row-sm;

      &-icon {
        width: 50rpx;
        height: 50rpx;
      }

      &-text {
        font-size: $uni-font-size-base;
        color: $uni-text-color;
        line-height: 1;
      }
    }
  }
}

.tips-container {
  position: relative;
  padding: $uni-spacing-row-xl;
  background-color: #fff;
  border-radius: $uni-border-radius-xxl;
  margin: $uni-spacing-row-xl;

  &-title {
    height: 41rpx;
    margin-bottom: $uni-spacing-row-lg;
  }

  &-content {
    font-size: $uni-font-size-sm;
    color: $uni-text-color-grey;

    view {
      line-height: 1.5;
    }
  }
}

.space {
  height: 100rpx;
}

.footer {
  height: 100rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-top: 1rpx solid $uni-border-color;
  display: flex;
  align-items: center;
  justify-content: center;

  &-btn {
    width: 710rpx;
    height: 90rpx;
    background-color: $uni-color-primary;
    color: #fff;
    font-size: $uni-font-size-lg;
    font-weight: bold;
    border-radius: $uni-border-radius-xl;
    display: flex;
    align-items: center;
    justify-content: center;

    &[disabled] {
      background-color: #f8b3b8;
      color: #fff;
    }
  }
}

::v-deep {
  .uni-easyinput__content-input {
    height: auto;
    margin-left: -10px;
  }
}
</style>
